<template>
<div class="wrapper">
<swiper :options="swiperOption" v-if =" showSwiper">
    <!-- slides -->
    <swiper-slide v-for="item of list" :key="item.id">
        <img class='swipwe-img' :src="item.imgUrl">
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
name: 'HomeSwiper',
props: {
    list :Array
},
 data () {
    return {
        swiperOption: {
            pagination:'.swiper-pagination',
            loop:true,
            observer:true,
            observeParents:true,
            autoplayDisableOnInteraction : false,//点了之后还是会轮播
            autoplay:2000
           }
       }
    },
    computed:{
        showSwiper () {//为了使轮播的第一页不为请求回来数据的第4页，需要使用
        // 计算属性，等数据请求回来再加加载
            return this.list.length
        }
    } 
}
</script>

<style lang = 'stylus' scoped>
    .wrapper >>> .swiper-pagination-bullet-active
     background: #fff !important
    .wrapper
     overflow: hidden
     width:100%
     height:0
     padding-bottom :31.25%
     .swipwe-img
        width :100%
</style>
